<template>
  <div style="height:100%">
    <Chart :cdata="cdata" />
  </div>
</template>

<script>
import Chart from './chart.vue'
export default {
  data () {
    return {
      cdata: {}
    };
  },
  components: {
    Chart,
  },
  props: {
    info: {
      type: Object
    }
  },
  watch: {
    info: {
      handler (newVal) {
        if (newVal) {
          this.cdata = {
            xAxis: {
              type: 'category',
              data: ['书记岗', '两委岗', '其他正职岗', '副职岗', '社工岗', '网格员'],
              axisLabel: {
                interval: 0
              }
            },
            yAxis: {
              type: 'value',
              name: '（万元）'
            },
            tooltip: {
              trigger: "axis",
              backgroundColor: "rgba(255,255,255,0.1)",
              formatter: "{a} <br/>{b} : {c}万元",
              axisPointer: {
                type: "shadow",
                label: {
                  show: true,
                  backgroundColor: "#7B7DDC"
                }
              }
            },
            grid: {
              x: "10%",
              y: "25%",
              x2: "5%",
              y2: '15%'
            },
            series: [
              {
                name: '待遇',
                type: 'bar',
                barWidth: 20,//柱图宽度
                // markLine: {
                //   data: [
                //     { type: 'average', name: '平均值' },
                //   ]
                // },
                data: [
                  {
                    value: newVal.shuji,
                    itemStyle: {
                      color: '#F40002',
                    }
                  },
                  {
                    value: newVal.liangwei,
                    itemStyle: {
                      color: '#32c5e9',
                    }
                  }, {
                    value: newVal.qitazhengzhi,
                    itemStyle: {
                      color: '#9fe6b8',
                    }
                  }, {
                    value: newVal.fuzhi,
                    itemStyle: {
                      color: '#ffdb5c',
                    }
                  }, {
                    value: newVal.shegong,
                    itemStyle: {
                      color: '#e7bcf3',
                    }
                  }, {
                    value: newVal.wangge,
                    itemStyle: {
                      color: '#8378ea',
                    }
                  }
                ],
                markLine: {
                  // label: {
                  //   position: "start"          //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                  // },
                  data: [{
                    silent: false,             //鼠标悬停事件  true没有，false有
                    lineStyle: {               //警戒线的样式  ，虚实  颜色
                      color: "#FA3934",
                    },
                    yAxis: newVal.avg_daiyu         // 警戒线的标注值，可以有多个yAxis,多条警示线   或者采用   {type : 'average', name: '平均值'}，type值有  max  min  average，分为最大，最小，平均值
                  }]
                },
                  label: {
                    show: true,
                    formatter: '{c}万元',
                    position: 'top'
                  },
                itemStyle: {
                  //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
                  normal: {
                    //柱形图圆角，初始化效果
                    barBorderRadius: [5, 5, 0, 0],
                    // label: {
                    //   show: true, //开启显示
                    //   position: 'top', //在上方显示
                    //   textStyle: { //数值样式
                    //     color: 'white',
                    //     fontSize: 12
                    //   }
                    // }
                  }
                },
                // barGap: '1%'
              },
            ]
          }
        }
      },
      immediate: true,
      deep: true
    }
  },
  mounted () {
  },
  methods: {
  }
};
</script>

<style lang="scss" scoped>
</style>